import { Link, Route, Switch } from "react-router-dom";

import Home from "./views/Home";
import About from "./views/About";
import Contact from "./views/Contact";

export default function App() {
  return (
    <div>
      <h1>App</h1>

      <ul>
        <li>
          <Link to="/home?a=1&b=2">go home</Link>
        </li>

        <li>
          <Link to="/contact/100/张三">go contact</Link>
        </li>

        <li>
          <Link
            to={{
              pathname: "/about",
              state: {
                id: 100,
                name: "张三",
              },
            }}
          >
            go about
          </Link>
        </li>
      </ul>

      <hr />

      <Switch>
        <Route path="/home" component={Home} />

        <Route path="/about" component={About} />

        <Route path="/contact/:id/:name" component={Contact} />
      </Switch>
    </div>
  );
}
